﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="bookshelf.aspx.vb" Inherits="bookmeetprototype.bookshelf" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link runat="server" href="~/Styles/bootstrap.css" rel="stylesheet" />
    <link runat="server" href="~/Styles/bootstrap-responsive.css" rel="stylesheet" />
    <link runat="server" href="~/Styles/Site.css" rel="stylesheet" />
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <title>Your Bookshelf</title>
</head>
<body>
    <form id="form1" runat="server">
      <%-- Beginning of Navigation --%>
        <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="Default.aspx">BookMeet</a>
          <div class="nav-collapse collapse">
          <p class="navbar-text pull-right">
              <asp:LoginStatus ID="LoginStatus1" runat="server" />
          </p>
            <ul class="nav">

                  <li class="active"><a id="A1" runat="server" href="~/Default.aspx">About</a></li>
                  <li><a id="A2" runat="server" href="~/faq.aspx">FAQs</a></li>
                  <li><a id="A3" runat="server" href="~/discover.aspx">Articles</a></li>
                  <li><a id="A4" runat="server" href="~/calendar.aspx">Calendar</a></li>
                  <li><a id="A5" runat="server" href="~/bookshelf.aspx">Bookshelf</a></li>
                
                  <li><a id="A7" runat="server" href="~/list.aspx">Browse Books</a></li>
                  <li class="divider"></li>
                  <li><a id="A8" runat="server" href="~/addbook.aspx">Add A Book</a></li>
                </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
<!-- end of navigation bar -->   
    <div class="span2" style="background-color:transparent;padding-left:30px;padding-top:30px;padding-right:30px;width:140px;height:300px;">
<!--Sidebar content-->
<p><button runat="server" clientidmode="Static" id="clear" onserverclick="btnClearBookshelf" class="btn btn-large btn-danger" type="button">Clear Bookshelf</button></p>
<p><button runat="server" clientidmode="Static" id="Button1" onserverclick="btnGoToList" class="btn btn-large btn-warning" type="button">Add Some Books</button></p>
</div>
    
    <div class="bookshelf"><br /><br /><div style="margin-left:50px;">
        <asp:DataList ID="bookshelfie" runat="server" RepeatColumns="6" 
            RepeatDirection="Horizontal">
            <itemTemplate>
            <div class="floating" style="margin-bottom:40px;">
    	 <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "detail.aspx?ID=" + Eval("ID").ToString() %>' ><asp:Image ID="Image1" Height="120px" ToolTip='<%# Eval("Title") %>' CssClass="floatimg" NullImageUrl="~/img/no_image.jpg" runat="server" ImageUrl='<%# Eval("imgurl") %>' /></asp:HyperLink>
    </div>
            </itemTemplate>
            <SeparatorTemplate>
            </SeparatorTemplate>
        </asp:DataList>
    </div>
    </div><!-- end of bookshelf-->
   
    
       <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="~/js/jquery.js"></script>
    <script src="~/js/bootstrap-transition.js"></script>
    <script src="~/js/bootstrap-alert.js"></script>
    <script src="~/js/bootstrap-modal.js"></script>
    <script src="~/js/bootstrap-dropdown.js"></script>
    <script src="~/js/bootstrap-scrollspy.js"></script>
    <script src="~/js/bootstrap-tab.js"></script>
    <script src="~/js/bootstrap-tooltip.js"></script>
    <script src="~/js/bootstrap-popover.js"></script>
    <script src="~/js/bootstrap-button.js"></script>
    <script src="~/js/bootstrap-collapse.js"></script>
    <script src="~/js/bootstrap-carousel.js"></script>
    <script src="~/js/bootstrap-typeahead.js"></script>
    </form>
</body>
</html>
